<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="static/images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="static/images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="Bootstrap-Admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/bootstrap-admin.min.css">
    <!--  代码高亮css  -->
    <link rel="stylesheet" href="lib/prismjs/themes/prism-okaidia.css">
    <title>Bootstrap-Admin - 开源免费响应式后台管理系统模板</title>
</head>
<body>

<!--头部导航-->
<ul class="bsa-header">
    <!--   移动端侧边栏toggler(不可删除) -->
    <li>
        <div class="bsa-nav-item bsa-mobile-sidebar-toggler-item">
            <i class="bi bi-list"></i>
        </div>
    </li>
    <!--  搜索框表单部分  -->
    <li>
        <div class="bsa-nav-item bsa-cursor-default bsa-search-form-item">
            <form class="bsa-search-form" action="#">
                <input type="text" class="form-control bsa-search-form-control" name="keyword" aria-label="搜索关键词"
                       placeholder="搜索关键词">
                <button class="bsa-search-submit-btn" type="submit"><i class="bi bi-search"></i></button>
                <button class="bsa-search-close-icon" type="button"><i class="bi bi-x-lg"></i></button>
            </form>
        </div>
    </li>
    <!--  空白占位符(可以让.bsa-header-item左右分布)   -->
    <li class="bsa-spacer"></li>
    <!--  移动端显示的搜索按钮(和搜索框是配套使用)      -->
    <li>
        <div class="bsa-nav-item bsa-mobile-search-toggler-item">
            <i class="bi bi-search"></i>
        </div>
    </li>
    <!--   拓展应用(建议把拓展的连接放在这里,以免破坏头部的整体布局)  -->
    <li class="dropdown">
        <div class="bsa-nav-item" data-bs-toggle="dropdown" data-bs-auto-close="outside">
            <i class="bi bi-grid"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card border-0">
                <div class="card-header bg-white d-flex align-items-center justify-content-between">
                    <span class="bsa-font-15">应用列表</span>
                    <a href="javascript:" class="text-muted bsa-font-13 text-decoration-none">编辑</a>
                </div>
                <div class="card-body p-0">
                    <div class="container-fluid">
                        <div class="row row-cols-3 g-3 p-3">
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用1</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用2</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用3</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用4</div>
                            </a>
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用5</div>
                            </a>
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用6</div>
                            </a>
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用7</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用8</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用9</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用10</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用11</div>
                            </a>

                        </div>
                    </div>
                </div>
                <div class="card-footer text-center bg-white">
                    <a href="javascript:" class="text-muted bsa-font-14 text-decoration-none">查看更多应用</a>
                </div>
            </div>
        </div>
    </li>
    <!--    通知    -->
    <li class="dropdown">
        <div class="bsa-nav-item" data-bs-toggle="dropdown">
            <div class="bsa-header-badge-wrapper">
                <span class="bsa-header-badge">99+</span>
                <i class="bi bi-bell"></i>
            </div>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card border-0">
                <div class="card-header bg-white d-flex align-items-center justify-content-between">
                    <span class="bsa-font-15">通知列表</span>
                    <a href="javascript:" class="text-muted bsa-font-13 text-decoration-none">全部设为已读</a>
                </div>
                <div class="card-body p-0">
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color1 text-white">
                            <i class="bi bi-cart"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">新订单</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                您收到新的订单
                            </div>
                            <div class="small text-muted">10秒前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color2 text-white">
                            <i class="bi bi-people"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">新增用户</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                100个新用户注册
                            </div>
                            <div class="small text-muted">30分钟前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color3 text-white">
                            <i class="bi bi-chat-square-dots"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">新的评论</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                您收到客户新的评论
                            </div>
                            <div class="small text-muted">2天前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color4 text-white">
                            <i class="bi bi-cart-check"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">订单已经发货</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                您的商品已在运送途中
                            </div>
                            <div class="small text-muted">3天前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color4 text-white">
                            <i class="bi bi-person-workspace"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">新的同事</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                新增3位后台管理工作成员
                            </div>
                            <div class="small text-muted">1周前</div>
                        </div>
                    </a>
                </div>
                <div class="card-footer text-center bg-white">
                    <a href="javascript:" class="text-muted bsa-font-14 text-decoration-none">查看所有通知</a>
                </div>
            </div>
        </div>
    </li>
    <!--    消息    -->
    <li class="dropdown">
        <div class="bsa-nav-item" data-bs-toggle="dropdown">
            <div class="bsa-header-badge-wrapper">
                <span class="bsa-header-badge">9</span>
                <i class="bi bi-chat-left"></i>
            </div>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card border-0">
                <div class="card-header bg-white d-flex align-items-center justify-content-between">
                    <span class="bsa-font-15">消息列表</span>
                    <a href="javascript:" class="text-muted bsa-font-13 text-decoration-none">全部设为已读</a>
                </div>
                <div class="card-body p-0">
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <img src="https://temp.im/120x120" class="bsa-height-45 bsa-width-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">Jack</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                I'm fine
                            </div>
                            <div class="small text-muted">6分钟前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <img src="https://temp.im/120x120" class="bsa-height-45 bsa-width-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">Rose</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            </div>
                            <div class="small text-muted">3小时前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <img src="https://temp.im/120x120" class="bsa-height-45 bsa-width-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">Ben</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                Lorem ipsum dolor sit amet, consectetur.
                            </div>
                            <div class="small text-muted">1天前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <img src="https://temp.im/120x120" class="bsa-height-45 bsa-width-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">Emily</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium
                                architecto autem corporis, eos illo illum itaque nemo nisi, optio sint vitae?
                                Accusantium dolor eius enim iste laudantium perferendis porro!
                            </div>
                            <div class="small text-muted">3天前</div>
                        </div>
                    </a>
                </div>
                <div class="card-footer text-center bg-white">
                    <a href="javascript:" class="text-muted bsa-font-14 text-decoration-none">查看所有消息</a>
                </div>
            </div>
        </div>
    </li>
    <!--    用户信息    -->
    <li class="dropdown">
        <div class="bsa-nav-item" data-bs-toggle="dropdown">
            <div class="d-flex align-items-center mb-2">
                <img src="https://temp.im/120x120" class="bsa-height-40 bsa-width-40 rounded-circle" alt="用户头像">
                <div class="flex-shrink-0 ms-2 bsa-max-width-150 bsa-user-details">
                    <div class="bsa-font-15 bsa-ellipsis">欲饮琵琶码上催</div>
                    <div class="bsa-font-13 bsa-ellipsis">超级管理员</div>
                </div>
            </div>
        </div>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-person me-2"></i>个人资料</a></li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-gear me-2"></i>设置</a></li>
            <li>
                <div class="dropdown-divider"></div>
            </li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-box-arrow-right me-2"></i>退出登录</a>
            </li>
        </ul>
    </li>
</ul>
<!--侧边栏-->
<div class="bsa-sidebar">
    <div class="bsa-sidebar-header">
        <img src="static/images/logo-icon.png" class="bsa-logo-icon" alt="logo-icon">
        <div class="bsa-logo-text">Bootstrap-Admin</div>
    </div>
    <div class="bsa-sidebar-body">
        <ul class="bsa-menu">
            <li>
                <a href="index.html">
                    <i class="bi bi-house"></i>首页
                </a>
            </li>
            <li>
                <a href="javascript:" class="has-children active open">
                    <i class="bi bi-columns-gap"></i>UI组件
                </a>
                <ul>
                    <li>
                        <a href="javascript:" class="has-children">表单</a>
                        <ul>
                            <li><a href="component-form-elements.html">基础元素</a></li>
                            <li><a href="component-form-validations.html">表单验证</a></li>
                            <li><a href="component-form-layouts.html">表单布局</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">栏</a>
                        <ul>
                            <li><a href="component-navs.html">导航</a></li>
                            <li><a href="component-navbar.html">导航栏</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="component-tabs.html">选项卡</a>
                    </li>
                    <li>
                        <a href="component-card.html" class="active">卡片</a>
                    </li>
                    <li>
                        <a href="component-button.html">按钮</a>
                    </li>
                    <li>
                        <a href="component-accordion.html">手风琴</a>
                    </li>
                    <li>
                        <a href="component-alert.html">警告框</a>
                    </li>
                    <li>
                        <a href="component-badge.html">徽章</a>
                    </li>
                    <li>
                        <a href="component-breadcrumb.html">面包屑</a>
                    </li>
                    <li>
                        <a href="component-table.html">表格</a>
                    </li>
                    <li>
                        <a href="component-carousel.html">幻灯片</a>
                    </li>
                    <li>
                        <a href="component-collapse.html">折叠</a>
                    </li>
                    <li>
                        <a href="component-dropdowns.html">下拉菜单</a>
                    </li>
                    <li>
                        <a href="component-list-group.html">列表组</a>
                    </li>
                    <li>
                        <a href="component-modal.html">模态框</a>
                    </li>
                    <li>
                        <a href="component-offcanvas.html">抽屉</a>
                    </li>
                    <li>
                        <a href="component-pagination.html">分页</a>
                    </li>
                    <li>
                        <a href="component-placeholders.html">骨架屏</a>
                    </li>
                    <li>
                        <a href="component-popovers.html">气泡</a>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">进度</a>
                        <ul>
                            <li><a href="component-progress.html">进度条</a></li>
                            <li><a href="component-spinners.html">进度环</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="component-scrollspy.html">滚动监听</a>
                    </li>
                    <li>
                        <a href="component-toasts.html">吐司</a>
                    </li>
                    <li>
                        <a href="component-tooltips.html">提示</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-html"></i>页面
                </a>
                <ul>
                    <li>
                        <a href="page-blank.html">新页面</a>
                    </li>
                    <li>
                        <a href="page-list.html">列表页面</a>
                    </li>
                    <li>
                        <a href="page-add.html">表单新增</a>
                    </li>
                    <li>
                        <a href="page-add2.html">表单新增2</a>
                    </li>
                    <li>
                        <a href="page-login.html">登录页面</a>
                    </li>
                    <li>
                        <a href="page-login2.html">登录页面2</a>
                    </li>
                    <li>
                        <a href="page-comment.html">评论页</a>
                    </li>
                    <li>
                        <a href="page-pricing.html">产品定价</a>
                    </li>
                    <li>
                        <a href="page-lock-screen.html">锁屏页</a>
                    </li>
                    <li>
                        <a href="page-article-list.html">文章列表页</a>
                    </li>
                    <li>
                        <a href="page-products-details.html">商品详情页</a>
                    </li>
                    <li>
                        <a href="page-profile.html">个人资料</a>
                    </li>
                    <li>
                        <a href="page-timeline.html">时间轴</a>
                    </li>
                    <li>
                        <a href="page-error.html">400/500页面</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-js"></i>插件
                </a>
                <ul>
                    <li><a href="plugin-fullcalendar.html">日历</a></li>
                    <li>
                        <a href="javascript:" class="has-children">图表</a>
                        <ul>
                            <li><a href="plugin-chart.html">chart.js</a></li>
                            <li><a href="plugin-echarts.html">echart.js</a></li>
                        </ul>
                    </li>
                    <li><a href="plugin-bootstrap-notify.html">通知插件</a></li>
                    <li><a href="plugin-bootstrap-dialog.html">弹层插件</a></li>
                    <li><a href="plugin-formvalidation.html">表单验证</a></li>
                    <li><a href="plugin-tempus-dominus.html">日期时间选择</a></li>
                    <li><a href="plugin-tinymce.html">富文本编辑器</a></li>
                    <li><a href="plugin-dropzone.html">文件上传</a></li>
                    <li><a href="plugin-croppie.html">头像裁剪</a></li>
                    <li><a href="plugin-ztree.html">树形组件</a></li>
                    <li><a href="plugin-select2.html">select2</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-list-nested"></i>多级菜单
                </a>
                <ul>
                    <li><a href="javascript:">一级菜单</a></li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                            <li>
                                <a href="javascript:" class="has-children">二级菜单</a>
                                <ul>
                                    <li><a href="javascript:">三级菜单</a></li>
                                    <li>
                                        <a href="javascript:" class="has-children">三级菜单</a>
                                        <ul>
                                            <li><a href="javascript:">四级菜单</a></li>
                                            <li><a href="javascript:">四级菜单</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!--内容区域-->
<div class="bsa-main-wrapper">
    <div class="bsa-main-content">
        <!-- 内容都应该被包裹在此-->
        <div class="container-fluid">
            <h4 class="text-dark mt-4">卡片的一些基本示例</h4>
            <hr>
            <div class="row row-cols-1 g-3 mb-3">
                <div class="col">
                    <div class="bsa-component">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis eius error inventore
                                molestiae vel? A debitis, dignissimos doloremque eaque expedita nobis similique
                                voluptate.
                                Atque dolores explicabo fugiat id nostrum quos.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col">
                    <div class="bsa-component">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias blanditiis
                                    cupiditate
                                    dolores harum hic id illum libero, odit officiis quidem quo reiciendis repellat
                                    repellendus similique sit soluta, totam ullam, vitae!
                                </p>
                                <a href="javascript:" class="card-link">Card link</a>
                                <a href="javascript:" class="card-link">Another link</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header">
                                card-header
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores,
                                    dolores
                                    doloribus earum eius eligendi fugiat ipsam iure nihil numquam pariatur perferendis
                                    quas
                                    quibusdam repellendus, reprehenderit saepe suscipit tempora unde!
                                </p>
                                <a href="javascript:" class="btn btn-primary">button</a>
                            </div>
                            <div class="card-footer">
                                card-footer
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <h4 class="text-dark mt-4">文本对齐</h4>
            <hr>
            <div class="row row-cols-1 row-cols-md-3 row-cols-lg-3 row-cols-xl-3 g-3 mb-3">
                <div class="col">
                    <div class="bsa-component">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet exercitationem impedit
                                    quod, tempore ullam veniam! Ad incidunt nam quam sequi unde? Accusamus distinctio
                                    dolores esse et hic quaerat qui ullam.
                                </p>
                                <a href="javascript:" class="btn btn-primary">link</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card text-center border-0 shadow-sm">
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut, beatae
                                    doloremque ea eius eos in minima minus nam nisi odit optio pariatur, ratione
                                    reprehenderit soluta tempore unde veniam voluptas?
                                </p>
                                <a href="javascript:" class="btn btn-primary">link</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card text-end border-0 shadow-sm">
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur doloribus earum
                                    magni nam quis! Aliquam amet aspernatur commodi consequuntur, dolores error excepturi
                                    facilis illum ipsa iste nobis quas soluta, voluptatem.
                                </p>
                                <a href="javascript:" class="btn btn-primary">link</a>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

            <h4 class="text-dark mt-4">和导航组件一起使用</h4>
            <hr>
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-2 g-3 mb-3">
                <div class="col">
                    <div class="bsa-component">
                        <div class="card text-center border-0 shadow-sm">
                            <div class="card-header">
                                <ul class="nav nav-tabs card-header-tabs">
                                    <li class="nav-item">
                                        <a class="nav-link active" aria-current="true" href="javascript:">Active</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="javascript:">Link</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link disabled">Disabled</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi debitis eius et
                                    excepturi magnam, nemo obcaecati possimus quaerat. Dignissimos doloribus, inventore iure
                                    laborum magni quasi quod sit! Consectetur, quibusdam, sapiente?
                                </p>
                                <a href="javascript:" class="btn btn-primary">link</a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card text-center border-0 shadow-sm">
                            <div class="card-header">
                                <ul class="nav nav-pills card-header-pills">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="javascript:">Active</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="javascript:">Link</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link disabled">Disabled</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium animi at
                                    commodi in molestiae nesciunt perferendis quidem quo sequi? Consectetur dignissimos hic,
                                    maxime nisi officia perspiciatis saepe sit veniam?
                                </p>
                                <a href="javascript:" class="btn btn-primary">link</a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <h4 class="text-dark mt-4">卡片的不同情景色</h4>
            <hr>
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-2 g-3 mb-3">

                <div class="col">
                    <div class="bsa-component">
                        <div class="card text-white bg-primary mb-3 border-0 shadow-sm">
                            <div class="card-header">card-header</div>
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consequatur ducimus maxime
                                    nihil porro quia soluta unde. At autem beatae cum, deserunt, ducimus esse ipsa,
                                    laboriosam molestiae nesciunt saepe voluptatibus?
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card text-white bg-secondary mb-3 border-0 shadow-sm">
                            <div class="card-header">card-header</div>
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dolorem eum
                                    incidunt quibusdam reiciendis voluptate. Maiores nam nemo nesciunt. Architecto aut
                                    dolorum eligendi fugit magni quas repudiandae voluptatum? Aut, corporis.
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card text-white bg-success mb-3 border-0 shadow-sm">
                            <div class="card-header">card-header</div>
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci assumenda
                                    dolor eligendi enim error hic mollitia non odio odit. Alias aspernatur at ex id officia
                                    quas quia vel voluptas?
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card text-white bg-danger mb-3 border-0 shadow-sm">
                            <div class="card-header">card-header</div>
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid culpa dolore
                                    doloribus error esse hic id illo inventore magnam, maiores mollitia necessitatibus
                                    pariatur perspiciatis quis, rem tempore unde veniam!
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card text-dark bg-warning mb-3 border-0 shadow-sm">
                            <div class="card-header">card-header</div>
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium cumque eos
                                    eveniet, iusto maxime reiciendis temporibus ullam! Aut error esse, laboriosam obcaecati
                                    perspiciatis sapiente suscipit totam. Eum natus quia sapiente?
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card text-dark bg-info mb-3 border-0 shadow-sm">
                            <div class="card-header">card-header</div>
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi incidunt quibusdam
                                    sequi similique unde. A atque explicabo hic mollitia neque nisi, nobis optio pariatur
                                    praesentium qui sapiente sequi veniam veritatis?
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card text-dark bg-light mb-3 border-0 shadow-sm">
                            <div class="card-header">card-header</div>
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium iusto libero
                                    magnam magni nisi non quidem vero voluptas! Beatae illo iusto quos repudiandae
                                    voluptatum! Aliquid asperiores esse illo inventore velit?
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card text-white bg-dark mb-3 border-0 shadow-sm">
                            <div class="card-header">card-header</div>
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci alias aspernatur
                                    autem deleniti distinctio eaque earum eveniet exercitationem iure laborum modi nam,
                                    optio perspiciatis quibusdam repellat sapiente ut voluptatem.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <h4 class="text-dark mt-4">携带图片的卡片</h4>
            <hr>
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 row-cols-xl-4 g-3">
                <div class="col">
                    <div class="bsa-component">
                        <div class="card shadow-sm border-0">
                            <img src="https://temp.im/600x400" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text bsa-ellipsis3">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto assumenda dicta,
                                    doloribus enim eveniet explicabo illum impedit ipsa iure laborum mollitia nobis quas
                                    quia quisquam quo quod reprehenderit suscipit vero!
                                </p>
                                <a href="javascript:" class="btn btn-outline-primary">button</a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card shadow-sm border-0">
                            <img src="https://temp.im/600x400" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text bsa-ellipsis3">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci assumenda
                                    atque commodi culpa deleniti dolore eveniet excepturi fugit harum illum ipsum magni
                                    minus modi officiis omnis, totam ut, velit?
                                </p>
                                <a href="javascript:" class="btn btn-primary">button</a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card shadow-sm border-0">
                            <img src="https://temp.im/600x400" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text bsa-ellipsis3">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi eveniet fuga, maiores
                                    molestiae mollitia nobis quibusdam tempora vel? Consequuntur culpa eveniet
                                    exercitationem harum in nostrum rem ullam voluptates? Aliquid, molestias!
                                </p>
                                <a href="javascript:" class="btn btn-secondary">button</a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card shadow-sm border-0">
                            <img src="https://temp.im/600x400" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text bsa-ellipsis3">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam beatae
                                    corporis deleniti dolor id illo iste magnam magni nobis non officiis pariatur quidem,
                                    quos ratione recusandae tempore voluptatem voluptatibus?
                                </p>
                                <a href="javascript:" class="btn btn-success">button</a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <h4 class="text-dark mt-4">携带列表组的卡片</h4>
            <hr>
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 row-cols-xl-4 g-3">
                <div class="col">
                    <div class="bsa-component">
                        <div class="card shadow-sm border-0">
                            <img src="https://temp.im/600x400" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text bsa-ellipsis3">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque ex natus omnis. A dolor
                                    et iusto laborum natus nisi perspiciatis? A assumenda ducimus ea et facere impedit,
                                    maxime neque repudiandae.
                                </p>
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item small">list-group-item</li>
                                <li class="list-group-item small">list-group-item</li>
                                <li class="list-group-item small">list-group-item</li>
                            </ul>
                            <div class="card-body">
                                <a href="javascript:" class="card-link">linkA</a>
                                <a href="javascript:" class="card-link">linkB</a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card shadow-sm border-0">
                            <img src="https://temp.im/600x400" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text bsa-ellipsis3">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur aut dolor
                                    dolores dolorum esse excepturi facilis impedit, incidunt modi, nesciunt optio quia sequi
                                    ullam unde velit vero vitae voluptates?
                                </p>
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item small">list-group-item</li>
                                <li class="list-group-item small">list-group-item</li>
                                <li class="list-group-item small">list-group-item</li>
                            </ul>
                            <div class="card-body">
                                <a href="javascript:" class="card-link">linkA</a>
                                <a href="javascript:" class="card-link">linkB</a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card shadow-sm border-0">
                            <img src="https://temp.im/600x400" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text bsa-ellipsis3">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ipsam iure iusto
                                    minima molestiae molestias, obcaecati optio ratione soluta unde! Ab culpa expedita
                                    facilis, fuga illo laboriosam numquam odio quaerat!
                                </p>
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item small">list-group-item</li>
                                <li class="list-group-item small">list-group-item</li>
                                <li class="list-group-item small">list-group-item</li>
                            </ul>
                            <div class="card-body">
                                <a href="javascript:" class="card-link">linkA</a>
                                <a href="javascript:" class="card-link">linkB</a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card shadow-sm border-0">
                            <img src="https://temp.im/600x400" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">card-title</h5>
                                <p class="card-text bsa-ellipsis3">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. At error fuga ipsum,
                                    necessitatibus nihil non odio officiis pariatur repellat sequi. Delectus deleniti ex
                                    fugiat illum laboriosam quas repellendus rerum similique.
                                </p>
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item small">list-group-item</li>
                                <li class="list-group-item small">list-group-item</li>
                                <li class="list-group-item small">list-group-item</li>
                            </ul>
                            <div class="card-body">
                                <a href="javascript:" class="card-link">linkA</a>
                                <a href="javascript:" class="card-link">linkB</a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <h4 class="text-dark mt-4">图片在卡片的不同方位</h4>
            <hr>
            <div class="row row row-cols-1 row-cols-md-1 row-cols-lg-2 row-cols-xl-2 g-3">
                <div class="col">
                    <div class="bsa-component">
                        <div class="card mb-3 border-0 shadow-sm">
                            <img src="https://temp.im/800x600" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">card-title-1</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos natus quaerat sapiente ut.
                                    A consequuntur cum deserunt ea eaque eligendi est ipsum, iure laboriosam modi natus
                                    praesentium provident veniam voluptatem.
                                </p>
                                <p class="card-text"><small class="text-muted">last update 2022/7/17</small>
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card mb-3 border-0 shadow-sm">
                            <div class="card-body">
                                <h5 class="card-title">card-title-2</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo facilis hic impedit
                                    incidunt laudantium officiis praesentium, voluptatibus. Asperiores doloremque, dolorum
                                    et, eum hic illum ipsum molestias pariatur quis tenetur, totam?
                                </p>
                                <p class="card-text"><small class="text-muted">last update 2022/7/17</small>
                                </p>
                            </div>
                            <img src="https://temp.im/1200x900" class="card-img-top" alt="...">
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card border-0 shadow-sm">
                            <div class="row g-0">
                                <div class="col-md-4 d-flex align-items-center bg-light">
                                    <img src="https://temp.im/800x600" alt="..."
                                         class="card-img">
                                </div>
                                <div class="col-md-8">
                                    <div class="card-body">
                                        <h5 class="card-title">card-title-3</h5>
                                        <p class="card-text">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur
                                            dignissimos est minima natus nesciunt quo quod totam! Accusamus aperiam cum
                                            dolorem ducimus ex modi officiis, sed sequi similique vel voluptatem.
                                        </p>
                                        <p class="card-text"><small class="text-muted">last update 2022/7/17</small>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card border-0 shadow-sm">
                            <div class="row g-0">
                                <div class="col-md-8">
                                    <div class="card-body">
                                        <h5 class="card-title">card-title-4</h5>
                                        <p class="card-text">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda
                                            atque consequatur, corporis dolores earum explicabo illo illum labore molestiae
                                            officiis provident ratione sed sint voluptas. Hic laborum nam voluptatum!
                                        </p>
                                        <p class="card-text"><small class="text-muted">last update 2022/7/17</small>
                                        </p>
                                    </div>
                                </div>
                                <div class="col-md-4 d-flex align-items-center bg-light">
                                    <img src="https://temp.im/800x800" alt="..."
                                         class="card-img">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <h4 class="text-dark mt-4">图片当作卡片背景</h4>
            <hr>
            <div class="row row row-cols-1 row-cols-md-1 row-cols-lg-2 row-cols-xl-2 g-3">
                <div class="col">
                    <div class="bsa-component">
                        <div class="card bg-dark text-white border-0 shadow-sm">
                            <img src="https://temp.im/1200x900" class="card-img" alt="...">
                            <div class="card-img-overlay">
                                <h5 class="card-title text-white">card-title-1</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur aut dicta
                                    dolorem ducimus facilis, harum illo minus modi nesciunt nihil non nostrum porro quidem
                                    reiciendis rerum saepe soluta totam!
                                </p>
                                <p class="card-text">last update 2022/7/17</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="bsa-component">
                        <div class="card bg-dark text-white border-0 shadow-sm">
                            <img src="https://temp.im/1200x900" class="card-img" alt="...">
                            <div class="card-img-overlay">
                                <h5 class="card-title text-white">card-title-2</h5>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque cupiditate, expedita
                                    illum iusto modi quam quidem rerum sint. Cupiditate, deserunt in laudantium modi nemo
                                    repellendus! Atque expedita laborum numquam voluptate!
                                </p>
                                <p class="card-text">last update 2022/7/17</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h4 class="text-dark mt-4">卡片组</h4>
            <hr>
            <div class="bsa-component">
                <div class="card-group shadow-sm border-0">
                    <div class="card border-end shadow-none">
                        <img src="https://temp.im/1200x900" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">card-title-1</h5>
                            <p class="card-text">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequuntur cum dolore enim
                                eveniet iste laboriosam natus nihil quae quis recusandae, voluptatum. Architecto autem culpa
                                cum nemo quae quas sequi!
                            </p>
                        </div>
                        <div class="card-footer bg-white"><small class="text-muted">last update 2022/7/17</small></div>
                    </div>
                    <div class="card border-end shadow-none">
                        <img src="https://temp.im/1200x900" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">card-title-2</h5>
                            <p class="card-text">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dicta excepturi facilis
                                maxime natus nesciunt perferendis perspiciatis placeat reprehenderit voluptates? Beatae
                                cumque eius eum ipsum iure pariatur sequi temporibus veniam!
                            </p>
                        </div>
                        <div class="card-footer bg-white"><small class="text-muted">last update 2022/7/17</small>
                        </div>
                    </div>
                    <div class="card shadow-none">
                        <img src="https://temp.im/1200x900" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">card-title-3</h5>
                            <p class="card-text">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur corporis cupiditate ea
                                facere ipsa iure, mollitia neque obcaecati pariatur placeat quas quasi qui quo recusandae
                                saepe sit tempore vel voluptatibus.
                            </p>
                        </div>
                        <div class="card-footer bg-white"><small class="text-muted">last update 2022/7/17</small>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!--调色板-->
<div class="bsa-switcher">
    <div class="bsa-switcher-toggler-btn">
        <div class="bsa-switcher-toggler-icon">
            <i class="bi bi-gear"></i>
        </div>
    </div>
    <div class="bsa-switcher-header">
        <h5 class="bsa-switcher-header-title">自定义主题</h5>
        <button type="button" class="btn-close text-reset bsa-switcher-toggler-btn"></button>
    </div>
    <div class="bsa-switcher-body">
        <div class="row row-cols-1 g-4">
            <div class="col">
                <h6>头部颜色</h6>
                <hr>
                <div class="bsa-headercolor-wrap">
                    <div class="row row-cols-auto g-3">
                        <div class="col">
                            <div class="headercolor0"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor1"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor2"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor3"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor4"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor5"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor6"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor7"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <h6>侧边栏颜色</h6>
                <hr>
                <div class="bsa-sidebarcolor-wrap">
                    <div class="row row-cols-auto g-3">
                        <div class="col">
                            <div class="sidebarcolor0"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor1"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor2"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor3"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor4"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor5"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor6"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor7"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--代码高亮js-->
<script src="lib/prismjs/prism.js"></script>
<script src="static/js/bootstrap.bundle.min.js"></script>
<script src="static/js/bootstrap-admin.min.js"></script>


</body>
</html>
